<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echartsDemo</title>
    <script src="./js/echarts.js"></script>
</head>

<body>
    <div class="echarts-fa">
        <div id="echarts1" style="width: 49%; height: 400px; float: left;"></div>
        <div id="echarts2" style="width: 49%; height: 400px; float: left;"></div>
        <div id="echarts3" style="width: 49%; height: 400px; float: left;"></div>
    </div>
    <script type="text/javascript">
        let data = [{
			"showName": "拨打",
			"number": 82
		}, {
			"showName": "接听",
			"number": 35
		}]
        let option = {
            title: {
                id: 'demo1',    //组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
                show: true,     //是否显示标题
                text: 'demo1',  //图表的名称 title
                link: 'www.baidu.com',  //主标题文本超链接。
                target: 'blank', //指定窗口打开主标题超链接。self:当前窗口打开，blank:新窗口打开
                textStyle: {
                    color: '#333', //主标题文字的颜色。
                    fontStyle: 'italic', //主标题文字字体的风格:可选'normal','italic','oblique'
                    fontWeight: '400', //主标题文字字体的粗细:'normal','bold','bolder','lighter'或者数字
                    fontFamily: '', //主标题文字的字体系列。
                    fontSize: '', //主标题文字的字体大小。
                    lineHeight: 20, //行高，number类型
                    textBorderColor: 'transparent',//文字本身的描边颜色。Color
                    textBorderWidth: 36,//文字本身的描边宽度。number
                    textShadowColor: 'transparent', //文字本身的阴影颜色。
                    textShadowBlur: 4,//文字本身的阴影长度。number
                    textShadowOffsetX: 4,//文字本身的阴影 X 偏移。number
                    textShadowOffsetY: 4,//文字本身的阴影 Y 偏移。number
                    rich: {}//在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                },
                subtext: '',//副标题文本，支持使用 \n 换行。
                sublink: '',//副标题文本超链接。
            },
            legend: {
                data:[], //切换的那个按钮，['张三','李四']，里面的项可以单独设置样式
                icon: '',//图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'

            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'  //鼠标移上去时展示的。a: series里的name，b: 鼠标移入类型的名称，c: 鼠标移入类型的值，d:所占比例，自动计算
            },
            color: ["#2d9aff", "#fbd02a"], //饼图颜色池
            series: [{
                name: "拨打接听次数",
                type: "pie",
                radius: ["40%", "60%"],
                avoidLabelOverlap: true, //是否启用防止标签重叠策略
                label: {
                    show: true,
                    position: "center"
                },
                emphasis: {
                    label: { //圈外字体移入
                        show: true,
                        fontSize: "12"
                    }
                },
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b}:{c}\n占比:{d}%' // 展示具体数值，b：展示数据的名称； c：展示数据的值
                        },
                        labelLine: {
                            show: true  // 是否显示线,连接饼图与边上文字的线
                        } 
                    }
                }
            }],
        }
        let dataName = [];
        let legendName = [];
        for (let i = 0; i < data.length; i++) {
            dataName.push({
                value: data[i].number,
                name: data[i].showName
            })
            legendName.push(data[i].showName)
        }
        option.series[0].data = dataName;
        option.legend.data = legendName;
        document.getElementById('echarts1').style.height = '400px';
        let myChart = echarts.init(document.getElementById('echarts1'));
        myChart.setOption(option);
    </script>
    <script>
        let dataBar = [{
			"showName": "0~1",
			"fromNumber": 1,
			"toNumber": 3
		}, {
			"showName": "1~2",
			"fromNumber": 1,
			"toNumber": 2
		}, {
			"showName": "2~3",
			"fromNumber": 4,
			"toNumber": 3
		}, {
			"showName": "3~4",
			"fromNumber": 0,
			"toNumber": 3
		}, {
			"showName": "4~5",
			"fromNumber": 1,
			"toNumber": 3
		}, {
			"showName": "5~6",
			"fromNumber": 6,
			"toNumber": 5
		}, {
			"showName": "6~7",
			"fromNumber": 0,
			"toNumber": 1
		}, {
			"showName": "7~8",
			"fromNumber": 2,
			"toNumber": 6
		}, {
			"showName": "8~9",
			"fromNumber": 2,
			"toNumber": 4
		}, {
			"showName": "9~10",
			"fromNumber": 1,
			"toNumber": 1
		}, {
			"showName": "10~11",
			"fromNumber": 2,
			"toNumber": 5
		}, {
			"showName": "11~12",
			"fromNumber": 5,
			"toNumber": 4
		}, {
			"showName": "12~13",
			"fromNumber": 0,
			"toNumber": 6
		}, {
			"showName": "13~14",
			"fromNumber": 0,
			"toNumber": 3
		}, {
			"showName": "14~15",
			"fromNumber": 2,
			"toNumber": 7
		}, {
			"showName": "15~16",
			"fromNumber": 1,
			"toNumber": 4
		}, {
			"showName": "16~17",
			"fromNumber": 1,
			"toNumber": 0
		}, {
			"showName": "17~18",
			"fromNumber": 0,
			"toNumber": 1
		}, {
			"showName": "18~19",
			"fromNumber": 1,
			"toNumber": 8
		}, {
			"showName": "19~20",
			"fromNumber": 0,
			"toNumber": 2
		}, {
			"showName": "20~21",
			"fromNumber": 1,
			"toNumber": 1
		}, {
			"showName": "21~22",
			"fromNumber": 0,
			"toNumber": 2
		}, {
			"showName": "22~23",
			"fromNumber": 0,
			"toNumber": 4
		}, {
			"showName": "23~24",
			"fromNumber": 4,
			"toNumber": 4
		}]
        let lineData = [];
        let sendNum = [];
        let fromNum = [];
        dataBar.map(item => {
            lineData.push(item.showName);
            sendNum.push(item.toNumber);
            fromNum.push(item.fromNumber);
        })
        let optionBar = {
            tooltip: {},
            legend: {
                top: '10px',
                right: '60px',
                data:['拨打','接听']
            },
            xAxis: {
                data: lineData,
                axisLabel: {
                    interval: 0,
                    rotate: 45
                },
            },
            yAxis: {},
            color: ["#30c479","#fbd02a"],
            series: [
                {
                    name: '拨打',
                    type: 'bar',
                    data: sendNum,
                    barGap : 0,  //不同系列的柱间距离，默认为类目间距的20%，可设固定值
                    label: {
                        normal: {
                            position: 'top',
                            show: true,  //显示柱状图上的数字及调样式
                            color: '#000'
                        }
                    }
                },
                {
                    name: '接听',
                    type: 'bar',
                    data: fromNum,
                    label: {
                        normal: {
                            position: 'top',
                            show: true,
                            color: '#000'
                        }
                    }
                }
            ]
        };
        document.getElementById('echarts2').style.height = '400px'; //图表初始化前得给宽高，不然渲染不出来
        let myChartBar = echarts.init(document.getElementById("echarts2"));
        myChartBar.setOption(optionBar);
    </script>、
    <script>
            let option3 = {
                tooltip: {
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: 'rgba(0,0,0,0)',
                        color: '#50ebff',
                    }
                },
                //触发类型：坐标轴触发
                position: 'left',
                trigger: 'axis',
                backgroundColor: 'rgba(25,38,74,0.5)',//通过设置rgba调节背景颜色与透明度
                color: 'black',
                borderWidth: '1',
                borderColor: '#50ebff',
                borderRadius: 'none',
                textStyle: {
                    color: '#aad2dc',
                    fontFamily: 'LCDD'
                }
                //extraCssText:'background:rgba(0, 0, 0, 0.5);'
                },
                legend: {
                    icon: 'circle',
                    bottom: '0',
                    left: '0',
                    align: 'left',
                    padding: [5, 10, 5, 10],
                    textStyle: {
                        color: '#aad2dc',
                    },
                    data: ['新增', '已侦破', '未侦破'],
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    top: '10%',
                    bottom: '15%',
                    containLabel: true,
                    borderColor: 'red'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: '#2c517f'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#212e50'
                        }
                    },
                    data: ["2020-08-27", "2020-08-28", "2020-08-29", "2020-08-30", "2020-08-31", "2020-09-01", "2020-09-02", "2020-09-03", "2020-09-04", "2020-09-05", "2020-09-06", "2020-09-07", "2020-09-08", "2020-09-09", "2020-09-10"]
                },
                yAxis: {
                    show: true,
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#2c517f'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#212e50'
                        }
                    }
                },
                color: ['#5369f9', '#0099ff', '#50ebff'],
                series: [
                    {
                        name: '新增',
                        type: 'line',
                        smooth: true,//线是直的还是弯的
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,0,0,0.1)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(100,213,255,0.1)' // 100% 处的颜色
                                }],
                            }
                        },
                        data: [0, 0, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 7, 0, 0]
                    },
                    {
                        name: '已侦破',
                        type: 'line',
                        smooth: true,//线是直的还是弯的
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,0,0,0.1)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(66,146,237,0.1)' // 100% 处的颜色
                                }],
                            }
                        },
                        data:  [2, 4, 0, 0, 19, 21, 1, 26, 8, 0, 0, 3, 3, 2, 0]
                    },
                    {
                        name: '未侦破',
                        type: 'line',
                        smooth: true, //线是直的还是弯的
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,0,0,0.1)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(182,201,125,0.1)' // 100% 处的颜色
                                }],
                            }
                        },
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 6, 0]
                    }
                ]
            }
            document.getElementById('echarts3').style.height = '400px'; //图表初始化前得给宽高，不然渲染不出来
            let myChart3 = echarts.init(document.getElementById("echarts3"));
            myChart3.setOption(option3);
    </script>
</body>

</html>